<template>
  <div class="map-container">
    <!-- 地图容器 -->
    <div id="mapContainer" class="map"></div>
    
    <!-- 控制按钮 -->
    <div class="control-panel">
      <button @click="addVehicleMarker">添加车辆标记</button>
      <button @click="updateVehiclePosition">更新车辆位置</button>
      <button @click="clearAllMarkers">清除所有标记</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

// 高德地图实例
let map = null;
// 车辆标记实例
let vehicleMarker = null;
// 车辆位置数据
const vehiclePosition = ref({
  lng: 116.397470,  // 经度
  lat: 39.908823    // 纬度
});

// 初始化地图
const initMap = () => {
  if (!window.AMap) {
    console.error('高德地图SDK未加载');
    return;
  }
  
  // 创建地图实例
  map = new window.AMap.Map('mapContainer', {
    zoom: 13,
    center: [vehiclePosition.value.lng, vehiclePosition.value.lat],
    resizeEnable: true
  });
  
  // 添加地图控件
  map.addControl(new window.AMap.ToolBar({
    position: 'RB'
  }));
  
  // 初始添加车辆标记
  addVehicleMarker();
};

// 添加车辆标记（使用车辆图标）
const addVehicleMarker = () => {
  // 如果已有标记，先移除
  if (vehicleMarker) {
    map.remove(vehicleMarker);
  }
  
  // 创建车辆图标 - 这里使用了车辆图标
  const icon = new window.AMap.Icon({
    size: new window.AMap.Size(40, 40),  // 图标尺寸
    // 车辆图标URL，可以替换为自己的车辆图片
    image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/car.png',
    imageSize: new window.AMap.Size(40, 40),  // 图标显示大小
    imageOffset: new window.AMap.Pixel(0, 0)   // 图标偏移量，调整图标位置
  });
  
  // 创建标记
  vehicleMarker = new window.AMap.Marker({
    position: [vehiclePosition.value.lng, vehiclePosition.value.lat],
    icon: icon,
    anchor: 'center',  // 车辆图标锚点设为中心，更符合视觉预期
    title: '车辆位置',
    zIndex: 100
  });
  
  // 添加到地图
  map.add(vehicleMarker);
  
  // 点击事件
  vehicleMarker.on('click', () => {
    window.alert(`车辆位置：经度 ${vehiclePosition.value.lng.toFixed(6)}，纬度 ${vehiclePosition.value.lat.toFixed(6)}`);
  });
};

// 更新车辆位置
const updateVehiclePosition = () => {
  // 随机生成附近的新位置（模拟车辆移动）
  const newLng = vehiclePosition.value.lng + (Math.random() - 0.5) * 0.02;
  const newLat = vehiclePosition.value.lat + (Math.random() - 0.5) * 0.02;
  
  // 更新位置数据
  vehiclePosition.value.lng = newLng;
  vehiclePosition.value.lat = newLat;
  
  // 更新标记位置
  if (vehicleMarker) {
    vehicleMarker.setPosition([newLng, newLat]);
    map.setCenter([newLng, newLat]);
  }
};

// 清除所有标记
const clearAllMarkers = () => {
  if (vehicleMarker) {
    map.remove(vehicleMarker);
    vehicleMarker = null;
  }
};

// 组件挂载时初始化地图
onMounted(() => {
  // 动态加载高德地图SDK
  const script = document.createElement('script');
  // 替换为你的高德地图API密钥
  const key = '7fac11790025fa9da05e739566ca7af8';
  script.src = `https://webapi.amap.com/maps?v=2.0&key=${key}`;
  script.onload = initMap;
  document.head.appendChild(script);
});
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.map {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

button {
  padding: 8px 16px;
  background-color: #1677ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0f5fcf;
}
</style>
